	//加载页面时，获取本地存储的数据添加到顶部购物车
	var ord = JSON.parse(localStorage.getItem("order"));
	$(function(){
		//判断订单数组是否有值
		if(ord == null || ord.length==0){
			//没有值
			$("#gouwuche span.tu3").next().text("(0)");//顶部购物车数量=0
			$("#spch").text(0);//侧边栏购物车也是0
			//将模板字符串添加到顶部购物车
			$("#disp-gouwuche").html(`
				<span id="zanwu">您的购物车中没有商品，
				<a href="../S2花礼网项目/index.html" target="_blank">
				快去选购吧</a></span>
				`);
		}else{
			//有值
			let ornum = 0 ;//商品数量
			let orsum = 0; //商品总价
			$(ord).each(function(i,e){
				ornum = ornum + parseInt(e.num);
				orsum = orsum + (parseInt(e.num)*parseInt(e.order_price));
				//循环添加到顶部购物车
				let item = `<div id="gouwu-er" class="clearfix">
								<div id="gou-01" class="clearfix">
									<a href="#">
										<img src="${e.src}" width="50px" height="52px">
									</a>
								</div>
								<div id="gou-02">
									<a href="#">${e.title}</a>
								</div>
								<div id="num">${e.num}</div>
								<div id="gou-03">
									<span class="g-03-1">￥</span>
									<span class="g-03-2">${e.order_price}</span>
								</div>
							</div>`;
				$("#disp-gouwuche").prepend($(item));
			});
			$("#gouwuche span.tu3").next().text(`(${ornum})`);//顶部购物车数量
			$("#spch").text(ornum);//侧边栏购物车数量
			let jiesuan = `	<div id="gouwu-jiesuan">
								<div id="tatal-prico">
									<span>
										<span id="shuzi">${ornum}</span>
										件总件:
									</span>
									<span class="g-03-1">￥</span>
									<span class="g-03-2">${orsum}</span>
								</div>
								<a href="../S2花礼网项目/shoppingTrolley2.html" class="btn">去购物车结算</a>
							</div>`;
			$("#disp-gouwuche").append($(jiesuan));
		}
	});


function upPrice(a,b){
	        return a.price- b.price;
	    }
	function downPrice(a,b){
		return b.price- a.price;
	}
		$(function() {
			$("#gouwuche").hover(function() {
				$("#disp-gouwuche").show();
			}, function() {
				$("#disp-gouwuche").hide();
			});
			$("#quan-daohang").hover(function() {
				$("#disp-shangpin").show();
			}, function() {
				$("#disp-shangpin").hide();
			});
			//联系人
			$(".cla").parent().parent().hover(function() {
				$("#disp-denglu").show();
				$(".cla").css("background-color", "#ff6a00");
			}, function() {
				$("#disp-denglu").hide();
				$(".cla").css("background-color", "");
			});
			$(".cla").parent().parent().hover(function() {
				$(".sap").show();
			}, function() {
				$(".sap").hide();
			});
			//购物车
			$(".message_list").hover(function() {
				$(".message_list").css("background-color", "#ff6a00");
				$("#spch").css("background", "#fff");
				$("#spch").css("color", "#ff6a00");
			}, function() {
				$(".message_list").css("background-color", "");
				$("#spch").css("background-color", "");
				$("#spch").css("color", "#fff");
			});
			//小爱心 隐藏显示
			$("#spsh").parent().parent().hover(function() {
				$(".disp-yi").stop().show(function() {
					$(".disp-yi").animate({
						"left": "-120px"
					}, 500);
				});
				$("#spsh").css("background-color", "#ff6a00");
			}, function() {
				$(".disp-yi").hide();
				$("#spsh").css("background-color", "");
			});
			//秒表
			$("#speh").parent().parent().hover(function() {
				$(".disp-er").stop().show(function() {
					$(".disp-er").animate({
						"left": "-120px"
					}, 500);
				});
				$("#speh").css("background-color", "#ff6a00");
			}, function() {
				$(".disp-er").hide();
				$("#speh").css("background-color", "");
			});
			//电话
			$("#spth").parent().parent().hover(function() {
				$(".disp-san").stop().show(function() {
					$(".disp-san").animate({
						"left": "-120px"
					}, 500);
				});
				$("#spth").css("background-color", "#ff6a00");
			}, function() {
				$(".disp-san").hide();
				$("#spth").css("background-color", "");
			});
			//耳机
			$("#spgh").parent().parent().hover(function() {
				$(".disp-si").stop().show(function() {
					$(".disp-si").animate({
						"left": "-120px"
					}, 500);
				});
				$("#spgh").css("background-color", "#ff6a00");
			}, function() {
				$(".disp-si").hide();
				$("#spgh").css("background-color", "");
			});
			//二维码
			$("#spyh").parent().parent().hover(function() {
				$("#mp_qrcode").show();
				$("#spyh").css("background-color", "#ff6a00");
			}, function() {
				$("#mp_qrcode").hide();
				$("#spyh").css("background-color", "");
			});
			//功能反馈
			$("#spjh").parent().parent().hover(function() {
				$("#mp_tooltip").stop().show(function() {
					$("#mp_tooltip").animate({
						"left": "-120px"
					}, 500);
				});
				$("#spjh").css("background-color", "#ff6a00");
			}, function() {
				$("#mp_tooltip").hide();
				$("#spjh").css("background-color", "");
			});
			//返回顶部
			$(window).scroll(function() {
				var zhi = $(document.documentElement).scrollTop();

				function tingbu(zhi) {
					if (zhi > 500) {
						$("#spnh").show();
						$("#jiao").hover(function() {
							$("#spnh").css("background-color", "#ff6a00");
							$("#mp_tp").stop().show(function() {
								$(".tops,#spnh").click(function() {
									$(document.documentElement).animate({
										"scrollTop": "0"
									}, 200);
								});
								$("#mp_tp").animate({
									"left": "-120px"
								}, 500);
							});
						}, function() {
							$("#mp_tp").hide();
							$("#spnh").css("background-color", "");
						});
					} else {
						$("#mp_tp").hide();
						$("#spnh").hide();
					}
				}
				tingbu(zhi);
			});
			//动态读取数据
			
			// json对象数组
			var shopList;
			// 获取json对象数组
			var shopListStr =  localStorage.getItem("shopLists");
			// 如果没有就创建一个
			if (shopListStr == null || shopListStr == "") {
				shopList = [{
						"img": "img/1-1.jpg",
						"key": "奢华定制款 ",
						"name": "永生花/「倾世之爱」永生玫瑰熊/定制款/60CM",
						"price": "399",
						"xiaozi": "奢华定制，进口永生玫瑰熊",
						"shaixuan": "巨型玫瑰"
					},
					{
						"img": "img/1-2.jpg",
						"key": "豪华定制款皮盒,限量发售 ",
						"name": "永生花/「倾世之爱」爱的告白",
						"price": "188",
						"xiaozi": "进口粉紫色永生玫瑰65朵、白色永生玫瑰30朵",
						"shaixuan": "经典花盒"
					},
					{
						"img": "img/1-3.jpg",
						"key": "奢华定制60cm巨型礼盒,限量发售 ",
						"name": "永生花/「倾世之爱」奢宠",
						"price": "296",
						"xiaozi": "厄瓜多尔进口红色永生玫瑰",
						"shaixuan": "巨型玫瑰"
					},
					{
						"img": "img/1-4.jpg",
						"key": "豪华定制款礼盒,限量发售 ",
						"name": "永生花/「倾世之爱」梦幻花园",
						"price": "259",
						"xiaozi": "厄瓜多尔进口粉色永生玫瑰",
						"shaixuan": "巨型玫瑰"
					},
					{
						"img": "img/2-1.jpg",
						"key": "迪奥口红+香水礼盒 ",
						"name": "永生花/心形礼盒/迪奥口红520+999+花漾香水30ml",
						"price": "398",
						"xiaozi": "专柜正品 2支经典色号口红+迪奥小姐花漾淡香水礼盒",
						"shaixuan": "经典花盒"
					},
					{
						"img": "img/2-2.jpg",
						"key": "纪梵希+迪奥口红礼盒 ",
						"name": "永生花/心形礼盒/迪奥口红520+999+纪梵希N37",
						"price": "168",
						"xiaozi": "专柜正品 3只经典色号口红礼盒",
						"shaixuan": "经典花盒"
					},
					{
						"img": "img/2-3.jpg",
						"key": "德国工艺 见证永恒爱情 ",
						"name": "永生花/一见倾心",
						"price": "258",
						"xiaozi": "粉色厄瓜多尔进口永生玫瑰5枝，紫色进口玫瑰4枝，粉紫色奥斯丁玫瑰4枝",
						"shaixuan": "巨型玫瑰"
					},
					{
						"img": "img/2-4.jpg",
						"key": "施华洛世奇 热卖礼盒 ",
						"name": "永生花/我如此爱你-施华洛世奇ONE浪漫心形项链",
						"price": "699",
						"xiaozi": "SWAROVSKI新款浪漫心形项链",
						"shaixuan": "经典花盒"
					},
					{
						"img": "img/3-1.jpg",
						"key": "升级款！施华洛世奇项链 ",
						"name": "永生花/柔情时光-施华洛世奇ONE浪漫心形项链",
						"price": "410",
						"xiaozi": "SWAROVSKI新款浪漫心形项链",
						"shaixuan": "永生瓶花"
					},
					{
						"img": "img/3-2.jpg",
						"key": "全新高定花漾礼盒款 ",
						"name": "永生花/爱的礼物-迪奥小姐花漾淡香水50ml永生花高定礼盒",
						"price": "198",
						"xiaozi": "内含Miss Dior花漾淡香水50ml",
						"shaixuan": "永生瓶花"
					},
					{
						"img": "img/3-3.jpg",
						"key": "新款上市！迪奥香水礼盒 ",
						"name": "永生花/花漾年华-迪奥香水款50ml",
						"price": "316",
						"xiaozi": "Miss Dior花漾淡香氛50ml",
						"shaixuan": "永生瓶花"
					},
					{
						"img": "img/3-4.jpg",
						"key": "新款上市！迪奥香水礼盒 ",
						"name": "永生花/花漾年华-迪奥香水款50ml",
						"price": "279",
						"xiaozi": "Miss Dior花漾淡香氛50ml",
						"shaixuan": "永生瓶花"
					},
					{
						"img": "img/4-1.jpg",
						"key": "全新高定花漾礼盒款 ",
						"name": "永生花/爱的礼物-迪奥全新真我香水30ml永生花高定礼盒",
						"price": "418",
						"xiaozi": "内含Dior Jadore香氛30ml",
						"shaixuan": "特色永生花"
					},
					{
						"img": "img/4-2.jpg",
						"key": "珠光手链+永生花礼盒 ",
						"name": "永生花/柔情时光-施华洛世奇Remix珠光手链礼盒 ",
						"price": "188",
						"xiaozi": "SWAROVSKI Remix珠光手链/玫瑰金色",
						"shaixuan": "特色永生花"
					},
					{
						"img": "img/4-3.jpg",
						"key": "新款上市！香奈儿香水礼盒 ",
						"name": "永生花/柔情时光-香奈儿邂逅柔情淡香水礼盒/35ml",
						"price": "288",
						"xiaozi": "香奈儿邂逅柔情淡香水 35ml",
						"shaixuan": "特色永生花"
					},
					{
						"img": "img/4-4.jpg",
						"key": "迪奥烈艳蓝金双口红定制礼 ",
						"name": "经典花盒/520999迪奥双口红款永生花礼盒/粉",
						"price": "729",
						"xiaozi": "迪奥口红＋永生花礼盒",
						"shaixuan": "特色永生花"
					}
				];
				// 创建好了扔进去
				localStorage.setItem("shopLists", JSON.stringify(shopList));
			} else {
				shopList = JSON.parse(shopListStr);
			}
			// 拿到数据循环扔进页面
			for (let i = 0; i < shopList.length; i++) {
				let shopInfoEle = `<li>
						<a href="#">
							<div id="lotm-img">
								<img src="${shopList[i].img}">
							</div>
							<div id="lotm-text">
								<p class="text-p">${shopList[i].key} </p>
								<h5 style="overflow: hidden; height: 20px; line-height: 20px;" class="name">
									${shopList[i].name}</h5>
								<p class="desc">${shopList[i].xiaozi}</p>
								<div id="text-box">
									<span class="prlce">¥&nbsp;${shopList[i].price}</span>
								</div>
							</div>
						</a>
					</li>`;
				$("#shenti-zhong>ul").append(shopInfoEle);
			}
			// 商品关键字查找
			$("#select").click(function(){
				let name = $("[name='shopName']").val();
				$("#shenti-zhong>ul").empty();
				for(let i=0;i<shopList.length;i++){
				    if(shopList[i].name.indexOf(name)!=-1){
				        let shopInfoEle = `<li>
						<a href="#">
							<div id="lotm-img">
								<img src="${shopList[i].img}">
							</div>
							<div id="lotm-text">
								<p class="text-p">${shopList[i].key} </p>
								<h5 style="overflow: hidden; height: 20px; line-height: 20px;" class="name">
									${shopList[i].name}</h5>
								<p class="desc">${shopList[i].xiaozi}</p>
								<div id="text-box">
									<span class="prlce">¥&nbsp;${shopList[i].price}</span>
								</div>
							</div>
						</a>
					</li>`;
				        $("#shenti-zhong>ul").append(shopInfoEle);
				    }
				}
				
				return false;
			});
			// 价格排序
			var flags = true;
			$(".jiage").click(function(){
				if(flags){
					let name = $("[name='shopName']").val();
					$("#shenti-zhong>ul").empty();
					shopList.sort(upPrice);
					for(let i=0;i<shopList.length;i++){
					    if(shopList[i].name.indexOf(name)!=-1){
					        let shopInfoEle =`<li>
						<a href="#">
							<div id="lotm-img">
								<img src="${shopList[i].img}">
							</div>
							<div id="lotm-text">
								<p class="text-p">${shopList[i].key} </p>
								<h5 style="overflow: hidden; height: 20px; line-height: 20px;" class="name">
									${shopList[i].name}</h5>
								<p class="desc">${shopList[i].xiaozi}</p>
								<div id="text-box">
									<span class="prlce">¥&nbsp;${shopList[i].price}</span>
								</div>
							</div>
						</a>
					</li>`;
				$("#shenti-zhong>ul").append(shopInfoEle);
					    }
					}
					flags=false;
				}else if(!flags){
					let name = $("[name='shopName']").val();
					$("#shenti-zhong>ul").empty();
					shopList.sort(downPrice);
					for (let i = 0; i < shopList.length; i++) {
					   if(shopList[i].name.indexOf(name)!=-1){
					       let shopInfoEle = `<li>
						<a href="#">
							<div id="lotm-img">
								<img src="${shopList[i].img}">
							</div>
							<div id="lotm-text">
								<p class="text-p">${shopList[i].key} </p>
								<h5 style="overflow: hidden; height: 20px; line-height: 20px;" class="name">
									${shopList[i].name}</h5>
								<p class="desc">${shopList[i].xiaozi}</p>
								<div id="text-box">
									<span class="prlce">¥&nbsp;${shopList[i].price}</span>
								</div>
							</div>
						</a>
					</li>`;
					       $("#shenti-zhong>ul").append(shopInfoEle);
					   }
					}
					flags=true;
				}
				return false;
			});
			//点击换字体颜色
			$("#com-1>li>a").click(function(){
				$("#com-1>li>a").removeClass("add");
				$(this).addClass("add");
			});
			//点击“综合刷新页面”
			$(".wo>a").click(function(){
				location.reload();
				return false;
			});
			//经典花盒
			$(".jingdian").click(function(){
				let name="经典花盒";
				$("#shenti-zhong>ul").empty();
				shopList.sort(downPrice);
				for (let i = 0; i < shopList.length; i++) {
					if(shopList[i].shaixuan==name){
						let shopInfoEle = `<li>
							<a href="#">
								<div id="lotm-img">
									<img src="${shopList[i].img}">
								</div>
								<div id="lotm-text">
									<p class="text-p">${shopList[i].key} </p>
									<h5 style="overflow: hidden; height: 20px; line-height: 20px;" class="name">
										${shopList[i].name}</h5>
									<p class="desc">${shopList[i].xiaozi}</p>
									<div id="text-box">
										<span class="prlce">¥&nbsp;${shopList[i].price}</span>
									</div>
								</div>
							</a>
						</li>`;
				$("#shenti-zhong>ul").append(shopInfoEle);
					}
				}
				return false;
			});
			//巨型玫瑰
			$(".juxing").click(function(){
				let name="巨型玫瑰";
				$("#shenti-zhong>ul").empty();
				for (let i = 0; i < shopList.length; i++) {
					if(shopList[i].shaixuan==name){
						let shopInfoEle = `<li>
							<a href="#">
								<div id="lotm-img">
									<img src="${shopList[i].img}">
								</div>
								<div id="lotm-text">
									<p class="text-p">${shopList[i].key} </p>
									<h5 style="overflow: hidden; height: 20px; line-height: 20px;" class="name">
										${shopList[i].name}</h5>
									<p class="desc">${shopList[i].xiaozi}</p>
									<div id="text-box">
										<span class="prlce">¥&nbsp;${shopList[i].price}</span>
									</div>
								</div>
							</a>
						</li>`;
				$("#shenti-zhong>ul").append(shopInfoEle);
					}
				}
				return false;
			});
			//永生瓶花
			$(".yongsheng").click(function(){
				let name="永生瓶花";
				$("#shenti-zhong>ul").empty();
				for (let i = 0; i < shopList.length; i++) {
					if(shopList[i].shaixuan==name){
						let shopInfoEle = `<li>
							<a href="#">
								<div id="lotm-img">
									<img src="${shopList[i].img}">
								</div>
								<div id="lotm-text">
									<p class="text-p">${shopList[i].key} </p>
									<h5 style="overflow: hidden; height: 20px; line-height: 20px;" class="name">
										${shopList[i].name}</h5>
									<p class="desc">${shopList[i].xiaozi}</p>
									<div id="text-box">
										<span class="prlce">¥&nbsp;${shopList[i].price}</span>
									</div>
								</div>
							</a>
						</li>`;
				$("#shenti-zhong>ul").append(shopInfoEle);
					}
				}
				return false;
			});
			//特色永生花
			$(".teise").click(function(){
				let name="特色永生花";
				$("#shenti-zhong>ul").empty();
				for (let i = 0; i < shopList.length; i++) {
					if(shopList[i].shaixuan==name){
						let shopInfoEle = `<li>
							<a href="#">
								<div id="lotm-img">
									<img src="${shopList[i].img}">
								</div>
								<div id="lotm-text">
									<p class="text-p">${shopList[i].key} </p>
									<h5 style="overflow: hidden; height: 20px; line-height: 20px;" class="name">
										${shopList[i].name}</h5>
									<p class="desc">${shopList[i].xiaozi}</p>
									<div id="text-box">
										<span class="prlce">¥&nbsp;${shopList[i].price}</span>
									</div>
								</div>
							</a>
						</li>`;
				$("#shenti-zhong>ul").append(shopInfoEle);
					}
				}
				return false;
			});
			$(".quanbu").click(function(){
				
				
			});
			//点击字体换颜色	
			$(".product-u>li>a").click(function(){
				$(".product-u>li>a").removeClass("addu");
				$(this).addClass("addu");
			});
			//点击全部刷新页面
			$(".quanbu").click(function(){
				location.reload();
				return false;
			});
			
		});